<template>
  <div class="container">
    <h1>条件【show和if】</h1><hr>
    <p v-show="a">I am so pretty</p>
    <p v-if="a">啦啦啦啦啦啦啦啦</p>
    <p>我是后续的元素</p><hr>

    <h1>条件【show和if】</h1><hr>
    <p v-if="age < 16">我是光头强</p>
    <p v-else-if="age >= 16 && age < 20">我是熊大</p>
    <p v-else>我是熊二</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: true,
      age: 18
    };
  }
};
</script>


<style>
h2{
  color: orange;
}
p {
  /* width: 50px; */
  /* height: 50px; */
  color: #a6a1d9;
  font-size: 30px;
  /* text-align: center; */
  /* line-height: 50px; */
  /* border: 5px solid pink; */
  /* border-radius: 50%; */
}
h1 {
  color: #fe7299;
}
img {
  width: 150px;
  height: 150px;
}
input {
  color: #a6a1d9;
}
</style>

